<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主办方登录</title>
  <link rel="stylesheet" href="./CSS/login.css">
  <style>
    .toNomal{

      position: relative;
      width: 81px;
      height: 34px;

      text-align: center;
      line-height: 34px;

      color: white;
      font-weight: bold;
      cursor: pointer;
      border-radius: 30px;
      background-color: #82c4ee;
      top: 30px;
      left: 30px;

    }
  </style>
</head>

<body>
  <div class="box">
    <div class="toNomal">普通登录</div>
    <div class="LoginBox">
      <div class="LoginLeft">
        <div class="LeftBox">
          <div class="BoxTitle">
            <P style="font-size: 16px;font-weight: 900;margin-bottom: 10px;">曾经的约定</P>
            <p style="font-size: 20px;font-weight: 900;margin-bottom: 10px;">主办方登录</p>

            <span style="color: red;" id="errMsg"></span>
          </div>

          <div class="inputBox1">
            <form action="#" class="form">
              <div class="inputBox">
                <p style="color: rgb(73, 161, 238);">主办方名</p>
                <div class="inputP">
                  <input type="text" class="userInput" name="username">
                </div>
              </div>
              <div class="inputBox">
                <p style="color: rgb(73, 161, 238);">密码</p>
                <div class="inputP">
                  <input type="password" class="userInput userPassword" name="password">
                </div>
              </div>
              <div style="width: 100%;height: 12px; display: flex;align-items: center;">
                <input type="checkbox" class="RemeberPassword"> <span style="margin-left: 5px;">记住密码</span>
              </div>

              <input type="submit" value="登录" class="inputSubmit">
              <input type="submit" value="注册" class="inputregister">
            </form>

          </div>

        </div>
      </div>
      <div class="LoginImage">

      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 获取屏幕宽度 
    var font = document.body.offsetWidth / 200 + "px";
    if (document.body.offsetWidth <= 1312) {
      font = 1312 / 200 + 'px'
    }
    document.querySelector("html").style.fontSize = font;

    var from = document.querySelector(".form")
    var userInput = document.querySelector(".userInput")
    var userPassword = document.querySelector(".userPassword")
    var inputBoxList = document.querySelectorAll(".inputBox")
    var RemeberPassword = document.querySelector(".RemeberPassword");

    console.log(RemeberPassword.checked);

    userInput.addEventListener("focus", () => {
      inputBoxList[0].style.boxShadow = "1px 26px 19px -20px skyblue"
    })
    userInput.addEventListener("blur", () => {
      inputBoxList[0].style.boxShadow = "0px 0px 0px -0px skyblue"
    })

    userPassword.addEventListener("focus", () => {
      inputBoxList[1].style.boxShadow = "1px 26px 19px -20px skyblue"
    })
    userPassword.addEventListener("blur", () => {
      inputBoxList[1].style.boxShadow = "0px 0px 0px -0px skyblue"
    })
    from.addEventListener("submit", (event) => {
      event.preventDefault()

    })

    var inputregister = document.querySelector(".inputregister")
    inputregister.addEventListener("click", function (event) {
      event.preventDefault();
      location.href = "./companyRegister.html";
    })
    var inputSubmit = document.querySelector(".inputSubmit")
    var errMsg = document.querySelector("#errMsg")
    inputSubmit.addEventListener("click", function () {
      var cname = userInput.value;
      var cpassword = userPassword.value;
      console.log("cname:"+cname)
      console.log("password:"+cpassword)
      axios({
        method: 'post',
        url: '/Indenture/companyLogin',
        data: {
          username: cname,
          password: cpassword
        }
      }).then((res) => {
        console.log(res.data)
        if (res.data.status == 0) {
          errMsg.innerHTML = res.data.Msg
        }
        else {
          sessionStorage.setItem("company",JSON.stringify(res.data.companyMsg))
          location.href="./addRace.html"
        }
      })

    })

    const toNomal = document.querySelector(".toNomal")
    toNomal.addEventListener("click",function (){
      location.href="./login.html"
    })

  </script>
</body>

</html>